<template>
  <div id="api-product-suppliers">
    <div class="card">
      <div class="card-header bg-info text-white">
        接口产品默认供应商
        <span class="small bg-white text-muted ms-2"
          >酒店、用车、机场服务等接口产品的默认供应商</span
        >
      </div>
      <div class="card-body">
        <form class="row">
          <div class="col-1">
            <select class="form-select ms-1" v-model.number="productType">
              <option value="0">全部</option>
              <option value="1">国内机票</option>
              <option value="2">国际机票</option>
              <option value="4">国内酒店</option>
              <option value="8">国际酒店</option>
              <option value="32">国内租车</option>
              <option value="64">国际租车</option>
              <option value="128">机场服务</option>
            </select>
          </div>

          <div class="col">
            <button
              type="button"
              class="btn btn-primary"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-muted btn-sm ms-5"
              @click.stop="reset0()"
            >
              重置
            </button>

            <a
              href="javascript:void(0)"
              class="btn btn-success ms-auto"
              @click="newSupplier()"
              >新建</a
            >
          </div>
        </form>
      </div>
    </div>
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th>产品类型</th>
          <th>供应商</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(info, index) in productSuppliers" :key="info.id">
          <td>{{ getTypeDesc(info.productType) }}</td>
          <td>{{ info.supplier.name }}</td>
          <td>
            <button
              class="btn btn-danger btn-sm"
              @click.stop="deleteSupplier(info.id)"
            >
              delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- New  Modal -->
    <div
      class="modal"
      id="modalNew"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
              <template v-if="this.id === 0"> 新建供应商信息 </template>
              <template v-else> 修改供应商信息 </template>
            </h4>
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span
              ><span class="sr-only">Close</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="frmPolicy" role="form" class="form-horizontal">
              <div class="row">
                <label class="control-label col-md-4 text-end">
                  产品类型
                </label>
                <div class="col-md-6">
                  <select
                    class="form-control ms-1"
                    v-model.number="productType"
                  >
                    <option value="0">全部</option>
                    <option value="1">国内机票</option>
                    <option value="2">国际机票</option>
                    <option value="4">国内酒店</option>
                    <option value="8">国际酒店</option>
                    <option value="32">国内租车</option>
                    <option value="64">国际租车</option>
                    <option value="128">机场服务</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <label class="control-label col-md-4 text-end"> 供应商 </label>
                <div class="col-md-6">
                  <select class="form-select ms-1" v-model.number="supplierId">
                    <template v-for="info in suppliers">
                      <option :value="info.id">{{ info.name }}</option>
                    </template>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              v-on:click="saveSupplier()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import { searchSuppliers } from "@/api/basic-data.js";
import {
  searchApiProductSupplier,
  saveApiProductSupplier,
  deleteApiProductSupplier,
} from "@/api/admin.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 15,
        pageTotal: 0,
      },
      id: 0,
      productType: 0,
      supplierId: 0,

      suppliers: [],
      productSuppliers: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 1000,
      };

      this.showLoading();

      searchSuppliers(
        params,
        (v) => {
          this.suppliers = v.dataList;
          this.sc = v.page;
        },
        () => {
          this.hideLoading();
        }
      );

      searchApiProductSupplier((v) => {
        this.productSuppliers = v;
      });
    },

    reset0: function () {
      this.supplierType0 = -1;
      this.name0 = "";
      this.scStatus = -1;
    },
    reset: function () {
      this.id = 0;
      this.name = "";
      this.supplierType = 0;
      this.remark = "";
      this.pinyin = "";
      this.paymentMethodId = 0;
      this.status = 1;
    },
    newSupplier: function () {
      this.reset();

      console.log('new supplier')

      var myModal = new bootstrap.Modal(document.getElementById('modalNew'))
myModal.show()


      $("#modalNew").modal();
    },
    saveSupplier: function () {
      const params = {
        productType: this.productType,
        supplierId: this.supplierId,
      };
      saveApiProductSupplier(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          $("#modalNew").modal("hide");
          this.search();
        } else {
          this.showErrMsg("失败：" + jsonResult.errmsg);
        }
      });
    },
    deleteSupplier: function (id) {
      deleteApiProductSupplier(id, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.search();
        } else {
          this.showErrMsg("失败：" + jsonResult.errmsg);
        }
      });
    },
    getTypeDesc: function (val) {
      switch (val) {
        case 1:
          return "国内机票";
        case 2:
          return "国际机票";
        case 4:
          return "国内酒店";
        case 8:
          return "国际酒店";
        case 32:
          return "国内租车";
        case 64:
          return "国际租车";
        case 128:
          return "机场服务";
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
